<template>
  <a-card class="defindcard" title="性能数据指标" :bordered="false" :headStyle="{ padding: '0 15px', border:0}" style="width:100%">
    <div class="propertyinfo">
      <a-row :gutter="24">
        <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '15px' }">
          <div class="utilrateicon">
            <div class="radius"><img src="~@/assets/icons/cpu.svg" /></div>
            <p>整体cpu核数</p>
            <h4>{{ cpuCoreCount ? cpuCoreCount : 0}}</h4>
          </div>
          <ve-gauge :data="cpuData" :settings="chartSettings" :extend="cpuChartExtend" width="100%" height="210px"></ve-gauge>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '15px' }">
          <div class="utilrateicon">
            <div class="radius"><img src="~@/assets/icons/memory.svg" /></div>
            <p>MCA集群总内存</p>
            <h4>{{ mcaColony ? mcaColony:0 }} TB</h4>
          </div>
          <ve-gauge :data="memoryData" :settings="chartSettings" :extend="memoryChartExtend" height="210px"></ve-gauge>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '15px' }">
          <div class="utilrateicon">
            <div class="radius"><img src="~@/assets/icons/storage.svg" /></div>
            <p>MCA集群总ecip总容量</p>
            <h4>{{ ecipColony ? ecipColony : 0 }} TB</h4>
          </div>
          <ve-gauge :data="ecipData" :settings="chartSettings" :extend="riskChartExtend" height="210px"></ve-gauge>
        </a-col>
      </a-row>
    </div>
  </a-card>
</template>

<script>
// import { getMcaCount } from '@/api/performance'
export default {
  name: 'PropertyInfo',
  data () {
    return {
      cpuChartExtend: {
        title: {
          text: 'CPU使用率',
          x: 'center',
          y: 'bottom',
          textStyle: {
            fontSize: 13,
            color: '#666'// 主标题文字颜色
          }
        }
      },
      memoryChartExtend: {
        title: {
          text: '内存使用率',
          x: 'center',
          y: 'bottom',
          textStyle: {
            fontSize: 13,
            color: '#666'// 主标题文字颜色
          }
        }
      },
      riskChartExtend: {
        title: {
          text: '存储空间使用率',
          x: 'center',
          y: 'bottom',
          textStyle: {
            fontSize: 13,
            color: '#666'// 主标题文字颜色
          }
        }
      },
      chartSettings: {
        dataType: {
          '占比': 'percent'
        },
        seriesMap: {
          '占比': {
            min: 0,
            max: 1,
            radius: '100%',
            axisLine: {
              lineStyle: {
                // color: [[0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],
                width: 7,
                shadowBlur: 2
              }
            },
            axisTick: {
              length: 15,
              lineStyle: {
                color: 'auto',
                shadowColor: '#fff',
                shadowBlur: 10
              }
            },
            axisLabel: {
              textStyle: {
                fontWeight: 'bolder',
                color: '#666',
                shadowColor: '#f00',
                shadowBlur: 10
              },
              distance: -10 // 文字离表盘的距离
            },
            splitLine: {
              length: 25,
              lineStyle: {
                width: 3,
                color: '#fff',
                shadowColor: '#fff',
                shadowBlur: 10
              }
            },
            detail: {
              backgroundColor: 'rgba(30,144,255,0.8)',
              borderWidth: 1,
              borderColor: '#fff',
              shadowColor: '#fff',
              shadowBlur: 5,
              offsetCenter: [0, '50%'],
              textStyle: {
                fontWeight: 'bolder',
                color: '#fff',
                fontSize: 20
              }
            }
          }
        }
      },
      cpuData: {
        columns: ['type', 'value'],
        rows: [
          { type: '占比', value: 0.4 }
        ]
      },
      memoryData: {
        columns: ['type', 'value'],
        rows: [
          { type: '占比', value: 0.8 }
        ]
      },
      ecipData: {
        columns: ['type', 'value'],
        rows: [
          { type: '占比', value: null }
        ]
      },
      cpuCoreCount: '', // cpu核数统计
      mcaColony: '', // MCA集群总内存
      ecipColony: ''// MCA集群总ecip总容量
    }
  },
  created () {
  },
  mounted () {
    // 轮询接口
    // const that = this
    const timers = window.setInterval(() => {
      setTimeout(res => {
      }, 0)// 利用定时器清除setInterval的每次叠加
    }, 6000)// 1分钟执行一次
    // this.once在离开当前路由时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timers)
    })
  },
  methods: {
    /**
     * 获取整体CPU核数
     */
    getCpuCoreCount () {
      const params = {}
      // getMcaCount(params).then(res => {
      //   this.cpuCoreCount = res.aggregations.sum_cores.value
      // })
    }
  }
}
</script>
<style lang="less" scoped>
.propertyinfo{
  .utilrateicon{
    text-align: center;
    margin-bottom: 20px;
    .radius{
      margin:0 auto;
      display: block;
      width: 70px;
      height: 70px;
      line-height: 70px;
      border-radius: 100%;
      text-align: center;
      background-color: #106dd2;
      background-image: -webkit-linear-gradient(#106dd2, #042a47);
      background-image: linear-gradient(#106dd2, #042a47);
      img{
        width: 60%;
      }
    }
    p{
      font-size: 14px;
      color: #666;
      margin-bottom: 0;
    }
    h4{
      font-size: 25px;
      font-weight: 400;
      color: #97b975;
      font-family: Arial, Helvetica, sans-serif;
    }
  }
}
.ant-card{
  position: relative;
  /deep/.ant-card-head::before{
    content: "";
    position: absolute;
    left: -2px;
    top: -2px;
    background: url("~@/assets/icons/top-left-corner.svg") 0 0 no-repeat ;
    width: 50px;
    height: 50px;
  }
  /deep/.ant-card-head::after{
    content: "";
    position: absolute;
    right: -2px;
    top: -2px;
    background: url("~@/assets/icons/top-right-corner.svg") top right no-repeat ;
    width: 50px;
    height: 50px;
  }
  /deep/.ant-card-body::before{
    content: "";
    position: absolute;
    left: -2px;
    bottom: -2px;
    background: url("~@/assets/icons/bottom-left-corner.svg") left bottom no-repeat ;
    width: 50px;
    height: 50px;
  }
  /deep/.ant-card-body::after{
    content: "";
    position: absolute;
    right: -2px;
    bottom: -2px;
    background: url("~@/assets/icons/bottom-right-corner.svg") bottom right no-repeat ;
    width: 50px;
    height: 50px;
  }
}
</style>
